<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msg1 }}</h1>
    <span>{{ counter }} {{ fullName }}</span>
    <span>{{ counter1 }}--{{ counter2 }}</span>
    <h2>{{ counter4 }}</h2>
    <h2>{{ iws }}</h2>
    <!-- vue-happy-scroll:滚动条 -->
    <div style="height:50px;border:1px red solid;" size="5">
      <happy-scroll>
        杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田。
      </happy-scroll>
    </div>
    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" :zoom="zoom" :center="center" :plugin="plugin">
        <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
        <el-amap-circle
          vid="circle"
          :center="center"
          :radius="radius"
          fill-opacity="0.2"
          strokeColor="#38f"
          strokeOpacity="0.8"
          strokeWeight="1"
          fillColor="#38f"
        ></el-amap-circle>
      </el-amap>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'
import {a, b} from '@/utils/cobalCommit.js'
export default {
  name: 'apple',
  data () {
    return {
      // count: 0,
      msg: 'Welcome to Your Vue.js apple',
      msg1: '欢迎Dylan',
      zoom: 16, // 初始化地图显示层级
      // center: [113.952489, 22.534683],  //地图中心点坐标
      center: [114.127388, 22.587162],
      lng: 0,
      lat: 0,
      label: {
        content: '广东省深圳市高新园',
        offset: [10, 12]
      },
      radius: 100,
      plugin: [
        {
          pName: 'ToolBar', // 工具条插件
          position: 'LB'
        },
        {
          pName: 'MapType', // 卫星与地图切换
          defaultType: 0,
          showTraffic: true // 实时交通图层
        },
        {
          pName: 'OverView'
          // isOpen:true//鹰眼是否打开
        },
        {
          pName: 'Scale'
        },
        {
          pName: 'Geolocation', // 定位插件
          showMarker: false,
          events: {
            init (o) {
              console.log(o)
              // vm.center = [114.127388, 22.587162];
            }
          }
        }
      ]
    }
  },
  // created:html加载完成之前，执行。执行顺序：父组件-子组件
  // mounted:html加载完成后执行。执行顺序：子组件-父组件
  mounted () {
    console.log(this.$route)
    this.commit.login() // 引入全局js方法
    a() // 引入公共js方法
    b() // 引入公共js方法
    console.log(this.$store)
    let i = 1
    // this.$state.state.count = 3 这样也是可以修改state里面的数据，但官方推荐mutations
    setInterval(() => {
      // 调用一个mutations就是store的commit()方法，第一个参数是mutations的名称。
      this.$store.commit('updateCount', i++)
    }, 1000)
    setInterval(() => {
      this.$store.commit('updateCount1', {
        num: i++,
        num2: 2
      })
    }, 1000)
    // dispatch专门触发actions的---异步---在引入mapMutations后直接这样使用，不引入看banana路由
    this.updateCountAsync({
      num: 5,
      time: 3000
    })
    this['iws/updateText']('IWS321')
  },
  computed: {
    // 不同的写法，相同的结果
    ...mapState({
      counter: (state) => state.count, // 做一些计算等处理
      counter1: 'count1',
      counter2: 'count2',
      counter4: 'count4',
      iws: (state) => state.iws.iws
    }),
    // ...mapState({
    //   counter: 'count'
    // })
    // ...mapState(['count']),
    // count () {
    //   return this.$store.state.count
    // },
    ...mapGetters(['fullName'])
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  },
  methods: {
    // mapMutations和mapActions对应的是操作，肯定写在methods里面---banana里面不需要引入下面的2个，也可以使用
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount4', 'iws/updateText']),
    addRadius () {
      this.radius += 10
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>
